import { useProjects } from "../hooks/useProjects";
import { Divider, List, Popover } from "antd";
import styled from "@emotion/styled";
import { ButtonProjectCreation } from "../components/ButtonProjectCreation";

const Wrapper = styled.div`
  min-width: 30rem;
`;

export const ProjectPopover = () => {
  const { data: projects, refetch } = useProjects();
  const pinnedProjects = projects?.filter((project) => project.pin);
  const content = (
    <Wrapper>
      <Divider orientation="left">项目收藏</Divider>
      <List
        split={false}
        dataSource={pinnedProjects}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta title={item.name} />
          </List.Item>
        )}
      />
      <Divider />
      <ButtonProjectCreation />
    </Wrapper>
  );
  return (
    <Popover content={content}
              onVisibleChange={()=>refetch()}>
      <div style={{cursor: "pointer"}}>项目</div>
    </Popover>
  );
};
